<!--
  功能：查看服务详情
  作者：menghao.yan
  邮箱：yxs2615@163.com
  时间：2022年10月21日 19:44:11
-->
<template>
  <a-page-header title="返回" sub-title="" @back="goBack" style="padding: 0px" />
  <a-card class="header">
    <a-space direction="vertical">
      <div class="title">
        <a-space>
          <safety-certificate-two-tone />{{info?.name}}</a-space>
      </div>
      <div class="msg">描述: {{info?.message}}</div>
      <div class="update-time">更新: {{info?.updateTime}}</div>
    </a-space>
  </a-card>
  <a-card :tab-list="tabList" :active-tab-key="activeTabKey" @tabChange="key => {activeTabKey=key}" class="content">
    <div v-show="activeTabKey=='detail'">
      <div class="info">
        <div class="title">接口介绍</div>
        <a-descriptions bordered :labelStyle="{'width': '160px', 'fontWeight': 'bold'}">
          <a-descriptions-item label="接口地址" :span="3">{{getInterfaceUri()}}{{info?.uri}}?key=xxx</a-descriptions-item>
          <a-descriptions-item label="请求方式" :span="3">{{info?.methodType}}</a-descriptions-item>
          <a-descriptions-item label="请求数据类型" :span="3">{{info?.methodContentType}}</a-descriptions-item>
          <a-descriptions-item label="响应类型" :span="3">{{info?.methodDataType}}</a-descriptions-item>
        </a-descriptions>
      </div>
      <div class="info">
        <div class="title">参数说明</div>
        <a-table :data-source="JSONParse(info?.params)" bordered :pagination="false">
          <a-table-column key="name" data-index="name" title="参数名" width="160px" />
          <a-table-column key="type" data-index="type" title="数据类型" width="160px" />
          <a-table-column key="message" data-index="message" title="描述" />
          <a-table-column key="required" data-index="required" title="是否必须" width="160px">
            <template #default="{ text: required }">
              <span v-if="required">是</span>
              <span v-else>否</span>
            </template>
          </a-table-column>
          <a-table-column key="default" data-index="default" title="默认值" width="200px" />
        </a-table>
      </div>
      <div class="info">
        <div class="title">返回格式</div>
        <a-table :data-source="JSONParse(info?.results)" bordered :pagination="false">
          <a-table-column key="name" data-index="name" title="字段" width="160px" />
          <a-table-column key="type" data-index="type" title="类型" width="160px" />
          <a-table-column key="message" data-index="message" title="说明" />
        </a-table>
      </div>
    </div>
    <div v-show="activeTabKey=='demo'">
      正在研发中...
    </div>
  </a-card>
</template>

<script>
import { SafetyCertificateTwoTone } from "@ant-design/icons-vue";
import { one } from "@/api/platform/plInterfaceApi";
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import { useRouter } from "vue-router";
import {} from "vuex";

export default defineComponent({
  name: "",
  props: {},
  emits: [],
  setup(props, context) {
    const router = useRouter();

    const tabList = [
      {
        key: "detail",
        tab: "接口详情"
      },
      {
        key: "demo",
        tab: "服务样例"
      }
    ];

    const data = reactive({
      info: null,
      tabList,
      activeTabKey: "detail"
    }); //里面写所有的响应式数据，像vue2中的data一样

    // 获取当前接口信息
    const initDetailInfo = () => {
      let code = router.currentRoute.value.query.code;
      one(code).then(resd => {
        data.info = resd;
      });
    };

    // 初始化页面
    onMounted(() => {
      initDetailInfo();
    });

    const goBack = () => {
      router.push({ name: "plInterface" });
    };

    const JSONParse = jsonStr => {
      if (jsonStr) {
        return JSON.parse(jsonStr);
      }
      return [];
    };
    let getInterfaceUri = () => {
      return window.config.interfaceUri;
    };
    return {
      ...toRefs(data),
      goBack,
      JSONParse,
      getInterfaceUri
    };
  },
  components: { SafetyCertificateTwoTone }
});
</script>

<style scoped lang="scss">
.header {
  .title {
    font-size: 1.4rem;
    font-weight: bold;
    font-family: "黑体";
    color: #000000;
  }
  .msg,
  .update-time {
    color: #9b9bac;
    font-style: normal;
  }
}
.content {
  margin-top: 20px;
  .info:first-child {
    .title {
      margin-bottom: 20px;
    }
  }
  .info:not(:first-child) {
    .title {
      margin: 20px 0px;
    }
  }
  .info {
    .title {
      font-weight: bold;
      font-size: 1rem;
      color: #000000;
      padding-left: 10px;
      border-left: 2px solid #1890ff;
    }
  }
}
</style>